<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.SLIDE.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>
      <div class="free-demo-row">
        <h3 class="free-title">free-slides</h3>
        <p>{{'DEMO.SLIDE.INTRO.0' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>styles</free-table-cell>
              <free-table-cell>
                <ng-template><code>Object</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>pagination</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>paginationClickable</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.2' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>arrow</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.3' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>loop</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.4' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>autoplay</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.5' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>autoplayDisableOnInteraction</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.6' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>touch</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.SLIDE.OPTION.7' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>direction</free-table-cell>
              <free-table-cell>
                <ng-template><code>String</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.SLIDE.OPTION.8' | translate"></span>
                </ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>

      <div class="free-demo-row">
        <h3 class="free-title">free-slide</h3>
        <p>{{'DEMO.SLIDE.INTRO.1' | translate}}</p>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-demo-board">
        <div class="free-card-board">
          <h3 class="free-toolbar">Import</h3>
          <free-tab-group direction="right" theme="line">
            <free-tab header="CODE">
              <free-code lang="typescript">
                import &#123;SlideModule&#125; from 'freeng/freeng';
              </free-code>
            </free-tab>
          </free-tab-group>
        </div>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
             <free-slides [styles]="{width: '300px'}">
               <free-slide>
                 <img src="assets/images/landscape1.jpg" alt="">
               </free-slide>
               <free-slide>
                 <img src="assets/images/landscape2.jpg" alt="">
               </free-slide>
               <free-slide>
                 <img src="assets/images/landscape3.jpg" alt="">
               </free-slide>
             </free-slides>
          </free-tab>
          <free-tab header="CODE" >
            <free-code lang="html" >
            &lt;free-slides&gt;
              &lt;free-slide&gt;
                &lt;img src="assets/images/landscape1.jpg" alt=""&gt;
              &lt;/free-slide&gt;
              &lt;free-slide&gt;
                &lt;img src="assets/images/landscape2.jpg" alt=""&gt;
              &lt;/free-slide&gt;
              &lt;free-slide&gt;
                &lt;img src="assets/images/landscape3.jpg" alt=""&gt;
              &lt;/free-slide&gt;
            &lt;/free-slides&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">paginationClickable</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-slides [styles]="{width: '300px'}" [pagination]="true" [paginationClickable]="true" >
              <free-slide>
                <img src="assets/images/landscape1.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape2.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape3.jpg" alt="">
              </free-slide>
            </free-slides>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html" >
              &lt;free-slides [pagination]="true" [paginationClickable]="true"&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape1.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape2.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape3.jpg" alt=""&gt;
                &lt;/free-slide&gt;
              &lt;/free-slides&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Loop</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-slides [styles]="{width: '300px'}" [pagination]="true"
                         [loop]="true" [paginationClickable]="true">
              <free-slide>
                <img src="assets/images/landscape1.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape2.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape3.jpg" alt="">
              </free-slide>
            </free-slides>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html" >
              &lt;free-slides [pagination]="true" [loop]="true" [paginationClickable]="true"&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape1.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape2.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape3.jpg" alt=""&gt;
                &lt;/free-slide&gt;
              &lt;/free-slides&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Autoplay</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-slides [styles]="{width: '300px'}" [pagination]="true"
                         [loop]="true" [paginationClickable]="true" [autoplay]="3000">
              <free-slide>
                <img src="assets/images/landscape1.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape2.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape3.jpg" alt="">
              </free-slide>
            </free-slides>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html" >
              &lt;free-slides [pagination]="true" [loop]="true" [paginationClickable]="true" [autoplay]="3000"&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape1.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape2.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape3.jpg" alt=""&gt;
                &lt;/free-slide&gt;
              &lt;/free-slides&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">AutoplayDisableOnInteraction</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-slides [styles]="{width: '300px'}" [pagination]="true" [autoplayDisableOnInteraction]="false"
                         [loop]="true" [paginationClickable]="true" [autoplay]="3000">
              <free-slide>
                <img src="assets/images/landscape1.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape2.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape3.jpg" alt="">
              </free-slide>
            </free-slides>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html" >
              &lt;free-slides [pagination]="true" [autoplayDisableOnInteraction]="false"
                [loop]="true" [paginationClickable]="true" [autoplay]="3000"&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape1.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape2.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape3.jpg" alt=""&gt;
                &lt;/free-slide&gt;
              &lt;/free-slides&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Touch</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-slides [styles]="{width: '300px'}" [pagination]="true" [loop]="true"
                         [touch]="true" [paginationClickable]="true">
              <free-slide>
                <img src="assets/images/landscape1.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape2.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape3.jpg" alt="">
              </free-slide>
            </free-slides>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html" >
              &lt;free-slides [pagination]="true"
              [loop]="true" [paginationClickable]="true" [touch]="true"&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape1.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape2.jpg" alt=""&gt;
                &lt;/free-slide&gt;
                &lt;free-slide&gt;
                  &lt;img src="assets/images/landscape3.jpg" alt=""&gt;
                &lt;/free-slide&gt;
              &lt;/free-slides&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Direction</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-slides [styles]="{width: '300px', height: '200px'}"
                         [pagination]="true" [direction]="'vertical'" [paginationClickable]="true">
              <free-slide>
                <img src="assets/images/landscape1.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape2.jpg" alt="">
              </free-slide>
              <free-slide>
                <img src="assets/images/landscape3.jpg" alt="">
              </free-slide>
            </free-slides>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html" >
              &lt;free-slides [pagination]="true"
              [loop]="true" [paginationClickable]="true" [touch]="true"&gt;
              &lt;free-slide&gt;
              &lt;img src="assets/images/landscape1.jpg" alt=""&gt;
              &lt;/free-slide&gt;
              &lt;free-slide&gt;
              &lt;img src="assets/images/landscape2.jpg" alt=""&gt;
              &lt;/free-slide&gt;
              &lt;free-slide&gt;
              &lt;img src="assets/images/landscape3.jpg" alt=""&gt;
              &lt;/free-slide&gt;
              &lt;/free-slides&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>
    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
